<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<style>
    ul{
        width: 200px;
        height: 200px;
        overflow: auto;
    }
    li{
        height: 100px;
    }
</style>
<body>

<a href="index.html">返回</a>
<div class="app">
    <h2>事件定义</h2>
    <button @click="showme">显示名字</button>
    <hr>
    <h3>修饰：.prevent阻止默认行为</h3>
    <a href="http://baidu.com" @click.prevent="showme">阻止访问百度</a>
    <h3>修饰：.stop阻止冒泡 ，优先子控件</h3>
    <div  @click="showme" style="background-color: aqua;padding:20px">
        div内容
        <button @click.stop="showme">阻止冒泡</button>
    </div>
    <h3>修饰：.once 一次性事件</h3>
    <button @click.once="showme">一锤子事</button>
    <h3>修饰：.capture 捕获事件,优先父级控件</h3>
    <div style="background-color: aquamarine;padding: 10px" @click.capture="show(1)">
        div1
        <div style="background-color: #1eb987;padding: 10px" @click="show(2)">div2</div>
    </div>
    <h3>修饰：.stop阻止冒泡 ，优先子控件</h3>
    <div  @click.self="showme" style="background-color: aqua;padding:20px">
        div内容
        <button @click.self="showme">阻止冒泡</button>
    </div>
    <h3>修饰：.passive ，优先执行默认事件，再执行处理事件。
        感觉像开了个线程，没有这个，程序会先执行处理内容，再来回执行默认行为</h3>
    <ul  @wheel.passive="logme">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>

</div>


<script>
    Vue.config.productionTip=false  //关闭生产状态提示
    const x=new Vue({
        data:function (){
            return{
                name:"老杨"
            }
        },
        methods:{
            showme(event){
                console.log(event);
                alert(  this.name);
            },
            show(value){
                alert(value)
            },
            logme(event){
                for (let i = 0; i <10000; i++) {
                    console.log('#')
                }
                console.log(event,"完成")
            }
        }
    })
    x.$mount(".app")//挂载方式
</script>
</body>
</html>